<template>
  <div class="defaultSetting">
    <div class="serachNav">
      <div>
        <span>币种名称:</span>
        <el-input
          placeholder="请输入币种名称"
          v-model="getForm.instId"
          clearable>
        </el-input>
      </div>
      <div>
        <span>是否推荐:</span>
        <el-select v-model="getForm.recommendedFlag" placeholder="是否推荐">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" style="margin-left: 10px" @click="searchBtn">查询</el-button>
      <el-button type="warning" @click="resetBtn">重置</el-button>
      <el-button type="danger" @click="dialogAllFrom=true">一键配置</el-button>
    </div>
    <el-table :data="tableList"
              align="center"
              style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="logoLink"
                       label="图标"
                       align="center" width="50" alien="center">
        <template slot-scope="scope">
            <span class="b-logo">
              <img :src="scope.row.logoLink">
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="instId"
                       label="币名"
                       align="center" alien="center"
                       width="100"
      >
        <template slot-scope="scope">
          <div class="isHotDiv">
            <span>{{ scope.row.instId }}</span>
            <!--              <span v-if="scope.row.recommendedFlag!=0" class="isHot">-->
            <!--               <svg t="1719407657870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1550" width="200" height="200"><path d="M859.995 460.963c-1.197 10.478-1.197 21.854 0 33.527v88.305c0 160.751-110.161 296.657-258.34 336.17v-52.982c0-49.693-40.112-89.805-89.505-89.805h-0.3c-49.394 0-89.805 40.112-89.805 89.805v52.982c-148.179-39.812-258.04-175.719-258.04-336.17V431.328c39.814 32.33 93.098 91.302 89.805 172.726 33.227-153.267 99.085-176.318 154.764-239.48 72.444-82.321 93.996-172.726 52.386-259.538C641.17 167.6 687.868 409.476 672.901 536.7c64.959-115.251 146.682-146.083 187.094-154.166v78.429z" fill="#FF7B15" p-id="1551"></path></svg>-->
            <!--              </span>-->
          </div>
        </template>

      </el-table-column>
      <el-table-column prop="recommendedOpenQuantity"
                       label="推荐张数"
                       align="center" alien="center"width="100">
      </el-table-column>
      <el-table-column prop="multipleQuantity"
                       label="合约倍数"
                       align="center" alien="center"width="80">
        <template slot-scope="scope">
          <span>x{{ scope.row.multipleQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="longProfitRatio"
                       label="多仓止盈比"
                       align="center" alien="center"width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.longProfitRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="shortProfitRatio"
                       label="空仓止盈比"
                       align="center" alien="center"width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.shortProfitRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="shortFirstOpenRatio"
                       label="空仓首次加仓比例"
                       align="center" alien="center"width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.shortFirstOpenRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="longFirstOpenRatio"
                       label="多仓首次加仓比例"
                       align="center" alien="center"width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.longFirstOpenRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="shortAddStockRatio"
                       label="空仓后续加仓比例"
                       align="center" alien="center">
        <template slot-scope="scope">
          <span>{{ scope.row.shortAddStockRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="longAddStockRatio"
                       label="多续后续加仓比例"
                       align="center" alien="center">
        <template slot-scope="scope">
          <span>{{ scope.row.longAddStockRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="longAddStockQuantityRation"
                       label="多仓加仓张数比例"
                       align="center" alien="center">
        <template slot-scope="scope">
          <span>{{ scope.row.longAddStockQuantityRation }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="shortAddStockQuantityRation"
                       label="空仓加仓张数比例"
                       align="center" alien="center">
        <template slot-scope="scope">
          <span>{{ scope.row.shortAddStockQuantityRation }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="longAddStockMaxTime"
                       label="多仓MAX次数"
                       align="center" alien="center">
      </el-table-column>
      <el-table-column prop="shortAddStockMaxTime"
                       label="空仓MAX次数"
                       align="center" alien="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <!--            <el-button @click="updateApi(scope.row)" type="primary" size="small">编辑</el-button>-->
          <span class="btnSpan" @click="updateApi(scope.row)"><i class="el-icon-edit"></i>编辑</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--    设置虚拟币详情信息-->
    <el-dialog width="800px" :title="Inst_title" :visible.sync="dialogInstVisible">
      <el-form :inline="true" :model="instForm" :rules="instRules" ref="instRules" label-width="160px"
               class="demo-ruleForm">

        <!--        <el-form-item label="最小开仓精度" prop="minOpenQuantity">-->
        <!--          <el-input v-model.number="instForm.minOpenQuantity"></el-input>-->
        <!--        </el-form-item>-->
<!--        <el-form-item label="合约倍数" prop="multipleQuantity">-->
<!--          <el-input-number v-model.number="instForm.multipleQuantity"></el-input-number>-->
<!--        </el-form-item>-->
        <el-form-item label="多仓止盈比" prop="longProfitRatio">
          <el-input-number v-model.number="instForm.longProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓止盈比" prop="shortProfitRatio">
          <el-input-number v-model.number="instForm.shortProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓首次加仓比例" prop="shortFirstOpenRatio">
          <el-input-number v-model.number="instForm.shortFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓首次加仓比例" prop="longFirstOpenRatio">
          <el-input-number v-model.number="instForm.longFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓后续加仓比例" prop="shortAddStockRatio">
          <el-input-number v-model.number="instForm.shortAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓后续加仓比例" prop="longAddStockRatio">
          <el-input-number v-model.number="instForm.longAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓最大加仓数" prop="longAddStockMaxTime">
          <el-input-number v-model.number="instForm.longAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓最大加仓数" prop="shortAddStockMaxTime">
          <el-input-number v-model.number="instForm.shortAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓加仓张数比例" prop="longAddStockQuantityRation">
          <el-input-number v-model.number="instForm.longAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓加仓张数比例" prop="shortAddStockQuantityRation">
          <el-input-number v-model.number="instForm.shortAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <el-form-item label="是否推荐" prop="recommendedFlag">
          <el-select v-model="instForm.recommendedFlag" placeholder="是否推荐" style="width: 180px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推荐张数" prop="recommendedOpenQuantity">
          <el-input-number type="number" :step="instForm.recommendedOpenQuantity"
                           v-model="instForm.recommendedOpenQuantity" :min="instForm.minOpenQuantity" :disabled="instForm.recommendedFlag!=1?true:false"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogInstVisible = false">取 消</el-button>
    <el-button type="primary" @click="putInst('instRules')">确 定</el-button>
  </span>
    </el-dialog>
    <!--    设置全部虚拟币详情信息-->
    <el-dialog width="800px" title="一键配置" :visible.sync="dialogAllFrom">
      <el-form :inline="true" :model="AllFrom" :rules="AllFromRules" ref="AllFromRules" label-width="160px"
               class="demo-ruleForm">
        <el-form-item label="多仓止盈比" prop="longProfitRatio">
          <el-input-number v-model.number="AllFrom.longProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓止盈比" prop="shortProfitRatio">
          <el-input-number v-model.number="AllFrom.shortProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓首次加仓比例" prop="shortFirstOpenRatio">
          <el-input-number v-model.number="AllFrom.shortFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓首次加仓比例" prop="longFirstOpenRatio">
          <el-input-number v-model.number="AllFrom.longFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓后续加仓比例" prop="shortAddStockRatio">
          <el-input-number v-model.number="AllFrom.shortAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓后续加仓比例" prop="longAddStockRatio">
          <el-input-number v-model.number="AllFrom.longAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓最大加仓数" prop="longAddStockMaxTime">
          <el-input-number v-model.number="AllFrom.longAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓最大加仓数" prop="shortAddStockMaxTime">
          <el-input-number v-model.number="AllFrom.shortAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓加仓张数比例" prop="longAddStockQuantityRation">
          <el-input-number v-model.number="AllFrom.longAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓加仓张数比例" prop="shortAddStockQuantityRation">
          <el-input-number v-model.number="AllFrom.shortAddStockQuantityRation"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogAllFrom = false">取 消</el-button>
    <el-button type="primary" @click="AllFromputInst('AllFromRules')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {ajax} from "@/config/strategy";

export default {
  name: "defaultSetting",
  data() {
    return {
      instRules: {
        minOpenQuantity: [
          {required: true, message: '最小开仓精度不能为空', trigger: 'blur'},
        ],
        recommendedOpenQuantity: [
          {required: true, message: '推荐张数不能为空', trigger: 'blur'},
        ],
        multipleQuantity: [
          {required: true, message: '合约倍数不能为空', trigger: 'blur'},
        ],
        longProfitRatio: [
          {required: true, message: '多仓止盈比不能为空', trigger: 'blur'},
        ],
        shortProfitRatio: [
          {required: true, message: '空仓止盈比不能为空', trigger: 'blur'},
        ],
        shortFirstOpenRatio: [
          {required: true, message: '空仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        longFirstOpenRatio: [
          {required: true, message: '多仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockRatio: [
          {required: true, message: '空仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        longAddStockRatio: [
          {required: true, message: '多仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockMaxTime: [
          {required: true, message: '空仓最大加仓次数不能为空', trigger: 'blur'},
        ],
        longAddStockMaxTime: [
          {required: true, message: '多仓最大加仓次数不能为空', trigger: 'blur'},
        ],
        longAddStockQuantityRation: [
          {required: true, message: '多仓加仓张数比例不能为空', trigger: 'blur'},
        ],
        shortAddStockQuantityRation: [
          {required: true, message: '空仓加仓张数比例不能为空', trigger: 'blur'},
        ],
      },
      instForm: {},
      dialogInstVisible: false,
      dialogAllFrom: false,
      Inst_title: null,
      AllFrom:{
        longProfitRatio:1.3,
        shortProfitRatio:1.3,
        shortFirstOpenRatio:5,
        longFirstOpenRatio:5,
        shortAddStockRatio:5,
        longAddStockRatio:5,
        longAddStockMaxTime:8,
        shortAddStockMaxTime:8,
        longAddStockQuantityRation:100,
        shortAddStockQuantityRation:100,

      },
      AllFromRules:{
        longProfitRatio: [
          {required: true, message: '多仓止盈比不能为空', trigger: 'blur'},
        ], shortProfitRatio: [
          {required: true, message: '空仓止盈比不能为空', trigger: 'blur'},
        ],
        shortFirstOpenRatio: [
          {required: true, message: '空仓首次加仓不能为空', trigger: 'blur'},
        ],longFirstOpenRatio: [
          {required: true, message: '多仓首次加仓不能为空', trigger: 'blur'},
        ],
        shortAddStockRatio: [
          {required: true, message: '空仓后续加仓比例不能为空', trigger: 'blur'},
        ],longAddStockRatio: [
          {required: true, message: '多仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        longAddStockMaxTime: [
          {required: true, message: '多仓最大加仓次数不能为空', trigger: 'blur'},
        ],shortAddStockMaxTime: [
          {required: true, message: '空仓最大加仓次数不能为空', trigger: 'blur'},
        ],
        longAddStockQuantityRation: [
          {required: true, message: '多仓加仓张数比例不能为空', trigger: 'blur'},
        ],shortAddStockQuantityRation: [
          {required: true, message: '空仓加仓张数比例不能为空', trigger: 'blur'},
        ],
      },
      options: [
        {
          value: '0',
          label: '默认'
        },
        {
          value: '1',
          label: '推荐'
        },
        {
          value: '-1',
          label: '不推荐'
        },
      ],
      tableList: null,
      total: 0,
      getForm: {
        current: 1,
        size: 10,
        instId: null,
        recommendedFlag: null
      }
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    AllConfigurations(){

    },
    updateApi(row) {
      console.log(row)
      this.dialogInstVisible = true
      this.instForm = {
        id: row.id,
        recommendedFlag: row.recommendedFlag,
        recommendedOpenQuantity: row.recommendedOpenQuantity,

        longProfitRatio: row.longProfitRatio,
        minOpenQuantity: row.minOpenQuantity,

        shortProfitRatio: row.shortProfitRatio,

        shortFirstOpenRatio: row.shortFirstOpenRatio,

        longFirstOpenRatio: row.longFirstOpenRatio,

        shortAddStockRatio: row.shortAddStockRatio,

        longAddStockRatio: row.longAddStockRatio,

        longAddStockMaxTime: row.longAddStockMaxTime,

        shortAddStockMaxTime: row.shortAddStockMaxTime,

        longAddStockQuantityRation: row.longAddStockQuantityRation,

        shortAddStockQuantityRation: row.shortAddStockQuantityRation,
        multipleQuantity: row.multipleQuantity,


      }

      this.Inst_title = row.instId + '币种配置'
    },
    putInst(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.putConfig(this.instForm).then(res => {
            const {code, msg} = res
            if (code == '00000') {
              this.$message.success(msg)
              this.dialogInstVisible = false
              this.getTableList()
            } else {
              this.$message.error(msg)
              this.dialogInstVisible = false
              this.getTableList()
            }

          })
        }else {
          this.$message.warning('非推荐币种不能修改')
        }
      })
    },
    AllFromputInst(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.editAllCcyConfig(this.AllFrom).then(res => {
            const {code, msg} = res
            if (code == '00000') {
              this.$message.success(msg)
              this.dialogAllFrom = false
              this.getTableList()
            } else {
              this.$message.error(msg)
              this.dialogAllFrom = false
              this.getTableList()
            }

          })
        }else {
          this.$message.warning('非推荐币种不能修改')
        }
      })
    },
    searchBtn() {
      this.getForm.current = 1
      this.getTableList()
    },
    resetBtn() {
      this.getForm = {
        current: 1,
        size: 10,
        instId: null,
        recommendedFlag: null
      }
      this.getTableList()
    },
    handleSizeChange(val) {
      this.getForm.size = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.getForm.current = val
      this.getTableList()
    },
    getTableList() {
      ajax.getConfigPage(this.getForm).then(res => {
        const {code, msg} = res
        if (code == '00000') {
          this.tableList = res.data.records
          this.total = res.data.total
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.serachNav {
  display: flex;
  align-items: center;
  margin: 20px 0;

  div {
    display: flex;

    span {
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.b-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
}

.defaultSetting {
  background-color: #fff;
  min-height: 100%;
  overflow: hidden;
}

</style>
